<template>
  <template v-for="item, index in items" :key="`${level}-${index}`">
    <el-row :gutter="10" class="edit-list content">
      <el-col :span="typeWidthArray[0]">
        <span v-if="index === 0 && level === 0" style="font-weight: bold;">{{ typeName }}</span>
      </el-col>
      <el-col :span="typeWidthArray[1]">
          <el-input :style="{paddingLeft: `${level * 8}px`}" v-model="item.sourceField" placeholder="请求字段名称" />
      </el-col>
      <el-col :span="typeWidthArray[2]">
          <el-select v-model="item.type" @change="toggleConfigType(item)" placeholder="类型" clearable>
            <el-option label="字段" :value="0" />
            <el-option label="数组" :value="1" />
            <el-option label="对象" :value="2" />
          </el-select>
      </el-col>
      <el-col :span="typeWidthArray[3]">
          <el-input v-model="item.targetField" placeholder="取值参数名" />
      </el-col>
      <el-col :span="typeWidthArray[4]">
          <el-input v-model="item.value" placeholder="固定值" />
      </el-col>
      <el-col :span="typeWidthArray[5]" style="justify-content: flex-start;">
         <el-button
            v-if="!(level > 0 && items.length === 1)"
            link
            type="danger"
            icon="Minus"
            @click="toggleConfig(type, 'minus', index, items, level)"
         ></el-button>
         <el-button
            v-if="index === items.length - 1"
            link
            type="primary"
            icon="Plus"
            @click="toggleConfig(type, 'add', index, items, level)"
         ></el-button>
      </el-col>
    </el-row>
    <recursive-item
      v-if="item.type === 2 && item.child?.length"
      :items="item.child"
      @toggleConfig="toggleConfig"
      @toggleConfigType="toggleConfigType"
      :type="type"
      :level="level + 1"
    />
  </template>
  <el-row :gutter="10" class="edit-list content" v-if="!props.items?.length">
    <el-col :span="typeWidthArray[0]">
      <span style="font-weight: bold;">{{ typeName }}</span>
    </el-col>
    <el-col :span="23 - typeWidthArray[0] - typeWidthArray[typeWidthArray.length - 1]">
        <span style="color: gray;">暂无数据</span>
    </el-col>
    <el-col :span="typeWidthArray[5]" style="justify-content: flex-start;">
       <el-button
          link
          type="primary"
          icon="Plus"
          @click="toggleConfig(type, 'add', 0, items, 0)"
       />
    </el-col>
  </el-row>
</template>

<script>
  export default { name: 'RecursiveItem' };
</script>
<script setup>
  import { defineProps, defineEmits, computed, watch, toRefs } from 'vue'
  const props = defineProps({
    items: Array,
    type: String,
    level: {
      type: Number,
      default: 0
    }
  })
  const { items, type, level } = toRefs(props)

  const typeName = computed(()=>{
    switch(props.type){
      case 'bodyOuterMapping': return '请求体外层结构';
      case 'bodyMapping': return '请求体';
      case 'returnOuterMapping': return '返回体外层结构';
      case 'returnBodyMapping': return '返回体';
      default: return '';
    }
  })

  const typeWidthArray = computed(()=>{
    switch(props.type){
      case 'bodyMapping':
      case 'returnBodyMapping': return [2, 6, 4, 4, 5, 2]
      case 'bodyOuterMapping':
      case 'returnOuterMapping':
      default: return [4, 5, 4, 4, 4, 2];
    }
  })

  const typeDefaultData = computed(() => {
    switch(props.type){
      case 'bodyMapping':
      case 'returnBodyMapping':
      case 'bodyOuterMapping':
      case 'returnOuterMapping':
      default: return {
        type: null,
        sourceField: null,
        targetField: null,
        value: null,
        child: []
      };
    }
  })

  const emit = defineEmits(['toggleConfig', 'toggleConfigType'])
  const toggleConfigType = (item)=>{
    emit('toggleConfigType', item, type)
  }
  const toggleConfig = (target ,type, index, items, level) => {
    emit('toggleConfig', target, type, index, items, level)
  }
</script>

<style scoped>
/* 样式可以根据需要自行定义 */
.recursive-item {
  margin-left: 20px;
}
</style>